<template>
  <div>
    <el-table
      highlight-current-row
      stripe
      :data="tableData"
      border
      height="300"
      style="width: 100%"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <my-column v-for="(item, index) in tableColumn" :key="index" :col="item"></my-column>
      <!-- <el-table-column v-for="item in tableColumn" :key="item.id">
        <template v-if="item.hasChildren"></template>
        <el-table-column v-if="item.hasChildren" :label="item.name" :prop="item.code">
          <el-table-column
            v-for="itemd in item.children"
            :key="itemd.id"
            :label="itemd.name"
            :prop="itemd.code"
          ></el-table-column>
        </el-table-column>
        <el-table-column v-else :key="item.id" :label="item.name" :prop="item.code"></el-table-column>
      </el-table-column> -->
    </el-table>
    <!-- <table style="border:1px solid black;">
      <th>
        <td class="td-style" colspan="2" v-for="item in tableColumn" :key="item.id">{{item.name}}</td>
        <td class="td-style">222</td>
      </th>
      <tr>
        <td class="td-style">11</td>
        <td class="td-style">22</td>
      </tr>
    </table> -->
  </div>
</template>

<script>
import myColumn from "../../components/input/myColumn.vue";
import { executinoSqlWithPage, executionSql } from "@/config/api";
export default {
  name: "hbGridInput",
  components: {
    myColumn
  },
  props: {
    vlistCode: {
      type: String
    }
  },
  data() {
    return {
      tableData: [],
      tableColumn: [
        {
          id: "1",
          code: "",
          name: "组合",
          hasChildren: true,
          children: [
            {
              id: "11",
              code: "MENU_CODE",
              name: "二次组合",
              hasChildren: true,
              children: [
                {
                  id: "111",
                  code: "MENU_CODE",
                  name: "编码"
                },
                {
                  id: "112",
                  code: "MENU_ID",
                  name: "主键"
                }
              ]
            },
            {
              id: "12",
              code: "MENU_TYPE",
              name: "类型"
            }
          ]
        },
        {
          id: "2",
          code: "MENU_NAME",
          name: "项目"
        }
      ]
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      var condition = " where 1=1";
      executionSql({
        dsCode: this.vlistCode,
        condition: condition
      }).then(res => {
        this.tableData = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
.td-style {
  border:1px solid black;
}
</style>